<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>明细</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/detail.css" />
    <link rel="stylesheet" href="css/all.css" />
</head>
<style>
	.detail{
		width: 100%;
	    position: absolute;
	    top: 1.5rem;
	    bottom: 0rem;
	    z-index: -1;
	    overflow-y: scroll;
	}
		
	
</style>
<body>
<div>
    <div class="head">
         <span href="javascript:;" onclick="go()">
        <i class="iconfont icon-iconfontjiantou1"></i></span>
        <h1 class="titles">明细</h1>
    </div>
    <div class="detail">
        <!--<div class="income">
            <div class="clearfix">
                <span class="income-one">提现</span><span class="income-two">2018-10-14</span>
            </div>
            <div class="clearfix">
                <span class="income-three">余额：3.90</span><span class="income-four">-100</span>
            </div>
        </div>
        <div class="income">
            <div class="clearfix">
                <span class="income-one">充值</span><span class="income-two">2018-10-14</span>
            </div>
            <div class="clearfix">
                <span class="income-three">余额：3.90</span><span class="income-four">+100</span>
            </div>
        </div>
        <div class="income">
            <div class="clearfix">
                <span class="income-one">提现</span><span class="income-two">2018-10-14</span>
            </div>
            <div class="clearfix">
                <span class="income-three">余额：3.90</span><span class="income-four">-100</span>
            </div>
        </div>
      --> 
    </div>
</div>
<script src="js/jquery.js"></script>
<script src="js/all.js"></script>
<script src="js/x_rem.js"></script>
<script type="text/javascript">
	
	//上拉加载
			//_loadIndex 为请求的页数    _loadState为请求状态  0 可以请求  1 正在请求  2 请求结束
			var _loadIndex = 1,
				_loadState = 0,
				html = "";  //渲染的文本
			//上拉加载调用js
			loadmore('.detail', function(data) {
				$.each(data.data.list, function(key, val) {
					$('#wrapper ul').append();
				});
			}, function() {});

			function loadmore(element, successFn) {
				$(element).on("scroll", function() {
					//当前可视容器高度
					var _elementHeight = $(element).outerHeight(),
						//当前滚动区域高度
						_elementChildHeight = $(element).children().outerHeight(),
						//滚动条高度
						_elementScroll = $(element).scrollTop();
					//滚动区域 - 滚动条高度 > 可视高度  就是还可以滚动  表示没有滚动到底部  否则就到了底部
					if(_elementChildHeight - _elementScroll - 10 > _elementHeight) {
						//console.log('没到底')
					} else {
						//console.log('到底了')
						//当状态为0 的时候进行加载，防止重复加载
						if(_loadState == 0) {
							//状态更新为1
							_loadState = 1;
							//增加页数
							_loadIndex += 1;
							//添加正在加载loadding
							$(element).append('<p class="nowLoad">加载中...</p>');
							//请求当前页数ajax
					 
							detail(_loadIndex);
						}
					}
				});

			};


		function detail(_loadIndex){
			var data={
				page:_loadIndex,
				rows:12
			};
			
			var success=(data)=>{
				 
				for(let i=0; i<data.message.length; i++){
					var subtract = ""
					 
					if(data.message[i].transactionType == 1){
						subtract = "-"
					}else{
						subtract = "+"
					}
					
					html+=`
					<div class="income">
			            <div class="clearfix">
			                <span class="income-one">${data.message[i].remarks}</span><span class="income-two">2018-10-14</span>
			            </div>
			            <div class="clearfix">
			                <span class="income-four">${subtract}${data.message[i].price}</span>
			            </div>
			        </div>
					`
				}
				
				$(".detail").html(html);
				
				
				_loadState = 0;
				console.log(_loadState);
			};
			
			Hajax("post","/wallet/getBill",data,success);
			
			
		};
		detail(_loadIndex);
		
</script>
</body>
</html>